<template>
  <div class="exam-mark">
    <el-table :data="submissions" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column label="试卷标题">
        <template #default="{ row }">
          {{ getPaperTitle(row.paperId) }}
        </template>
      </el-table-column>
      <el-table-column label="学生姓名">
        <template #default="{ row }">
          {{ getStudentName(row.studentId) }}
        </template>
      </el-table-column>
      <el-table-column prop="submitTime" label="提交时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          {{ statusMap[row.status] || row.status }}
        </template>
      </el-table-column>
      <el-table-column prop="score" label="分数">
        <template #default="{ row }">
          {{ row.score ?? '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="startGrading(row.id)"
            :disabled="row.status === 'GRADED'"
            :icon="Edit"
          >评分</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Edit } from '@element-plus/icons-vue';
import { usePaperStore } from '@/stores/api/paper';
import { usePaperSubmissionStore } from '@/stores/api/paper-submission';
import { useUserStore } from '@/stores/api/user';
import { ElMessage } from 'element-plus';

const paperStore = usePaperStore();
const paperSubmissionStore = usePaperSubmissionStore();
const userStore = useUserStore();
const router = useRouter();

const statusMap = {
  SUBMITTED: '待评分',
  GRADED: '已评分',
};

const submissions = ref([]);
const papers = ref([]);
const users = ref([]);

const getPaperTitle = (paperId: number) => {
  const paper = papers.value.find((p: any) => p.id === paperId);
  return paper ? paper.title : '未知试卷';
};

const getStudentName = (studentId: number) => {
  const student = users.value.find((u: any) => u.id === studentId);
  return student ? student.realName : '未知学生';
};

const fetchSubmissions = async () => {
  try {
    submissions.value = await paperSubmissionStore.fetchSubmissions();
  } catch (error) {
    ElMessage.error('获取提交记录失败');
  }
};

const fetchPapersAndUsers = async () => {
  try {
    papers.value = await paperStore.fetchPapers();
    users.value = await userStore.fetchUsers();
  } catch (error) {
    ElMessage.error('获取数据失败');
  }
};

const startGrading = (submissionId: number) => {
  router.push(`/exam/grade/${submissionId}`);
};

onMounted(() => {
  fetchSubmissions();
  fetchPapersAndUsers();
});
</script>

<style scoped>
.exam-mark {
  padding: 20px;
}

.mark-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.mark-header h2 {
  font-size: 24px;
  color: #333;
}

</style>